<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>列表渲染</title>
</head>
<body>
  <div id="root">
    <h2>监测数据变化的原理 数组</h2>
    <hr>
    <div>
      <div>
        <span v-for="(n,index) of arr" :key="index">{{ n }} ,</span>
      </div>
      <!-- 通过索引改变原数组是不被允许的 -->
      <button @click="arr[0]=100">通过索引改变原数组</button> <br><br>

      <button @click="arr.splice(0,1,100)">通过数组方法改变原数组</button><br><br>

      <button @click="age">通过set()改变原数组</button>
    </div>
  </div>

  <script type="text/javascript">
    new Vue({
     el: '#root', 
     data: { 
       arr: [1,4,8,9,10],
     },
     methods: {
       age(){
         this.$set(this.arr,0,200)
       }
     },
   })
 </script>
</body>
</html>


